<template>
  <div class="index">
    <!-- 头部导航开始 -->
    <div class="navbar">
      <mt-header title="优机汇手机商城">
        <div slot="right" class="header_right">
          <span @click="login" class="uname">{{ uname ? uname : "登录" }}</span>
          <span @click="cancel" v-if="uname">注销</span>
          <span @click="register" v-if="!uname">注册</span>
        </div>
      </mt-header>
      <!-- 头部导航结束 -->
      <!-- 头部选项卡开始 -->
      <div class="nav">
        <mt-navbar v-model="nav">
          <mt-tab-item id="1">华为</mt-tab-item>
          <mt-tab-item id="2">荣耀</mt-tab-item>
          <mt-tab-item id="3">苹果</mt-tab-item>
          <mt-tab-item id="4">小米</mt-tab-item>
        </mt-navbar>
      </div>
    </div>
    <!-- 头部选项卡结束 -->

    <!-- 面板开始 -->
    <div class="phoneList">
      <div class="spec" v-for="(item, index) of phone" :key="index">
        <router-link to="/detail">
          <img v-lazy="item.imgSrc" alt="" />
          <div class="spec-title">{{ item.title }}</div>
          <div class="spec-price">
            ¥{{ item.price }}
            <span>月销:{{ item.sales }}件</span>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 面板结束 -->

    <!-- 底部选项卡开始 -->
    <Tabbar :selected="tab"></Tabbar>
    <!-- 底部选项卡结束 -->
  </div>
</template>

<script>
import Tabbar from "../components/childs/tabbar";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      nav: "1",
      tab: "index",
      // 记录当前是否处于忙的状态
      busy: false,
      // 存放后台返回的数据
      phone: [],

      uname: "",
    };
  },
  created() {
    this.uname = localStorage.getItem("uname");
    // console.log(this.uname);
  },
  mounted() {
    this.axios.get("/phone?categoryid=" + this.nav).then((res) => {
      let data = res.data.result;
      // console.log(data);
      data.forEach((item) => {
        if (item.imgSrc != null) {
          item.imgSrc = require("../assets/imgs/" + item.imgSrc);
        }
        this.phone.push(item);
        // console.log(this.phone);
      });
    });
  },
  methods: {
    //登录
    login() {
      if (this.uname) {
        return;
      }
      this.$router.push("/login");
    },
    //注册
    register() {
      this.$router.push("/register");
    },
    // 注销
    cancel() {
      console.log(111);
      localStorage.removeItem("uname");
      this.uname = "";
    },
    // 动态加载商品
    LoadData() {
      this.busy = true;
      this.$indicator.open({
        text: "加载中...",
        spinnerType: "snake",
      });
      this.axios.get("/phone?categoryid=" + this.nav).then((res) => {
        let data = res.data.result;
        data.forEach((item) => {
          if (item.imgSrc != null) {
            item.imgSrc = require("../assets/imgs/" + item.imgSrc);
          }
          this.phone.push(item);
        });

        this.$indicator.close();
        this.busy = false;
      });
    },
  },

  watch: {
    // watch监听nav变量的值,并动态加载数据
    nav(value) {
      // 先将phone数组清空
      this.phone = [];
      this.LoadData();
    },
  },
};
</script>

<style>
.index {
  margin: 95px 0 70px;
}
.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.header_right {
  display: flex;
}
.header_right .uname {
  width: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.header_right a {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  padding-left: 5px;
}
.phoneList {
  display: flex;
  flex-wrap: wrap;
}
.spec {
  flex-basis: 44%;
  height: 210px;
  box-shadow: 0px 0px 5px #e9e9e9;
  margin: 5px;
  padding: 5px;
}
.spec img {
  width: 120px;
}
.spec-title {
  font-size: 12px;
  text-align: left;
  margin: 15px 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.spec-price {
  color: #f00;
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.spec-price span {
  color: #666;
  font-size: 12px;
  font-weight: 100;
}
a {
  text-decoration: none;
  color: #2c3e50;
}
</style>
